<template>
	<view class="mons">
		<view class="list">
			<view class="li">
				<view class="con" @click="che(l.id,l.fCanReturnMoney,l.iQuantity,l.cNextStatus)" :key="l.id" v-for="l in data.oOrderDetails">
					<view class="img">
						<image :src="l.DefaultImage" mode="widthFix"></image>
					</view>
					<view class="text">
						{{l.cProductName}}
						
					</view>
					<view class="numb">
						￥{{l.fSalePrice}}
						<view>
							x{{l.iQuantity}}
						</view>
					</view>
					<image v-if="lo == l.id" class="ops" src="../../static/img/3/3-43.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="li" @click='changeType'>
				{{returnText}}
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="li typeRow" v-if="showType">
				<view class="option_type" :class="selectType==1?'active':''" @click="setType(1)">我要退款
				<image v-if="selectType==1" src="../../static/img/gou@2x.png" mode="widthFix"></image>
				</view>
				<view class="option_type" :class="selectType==2?'active':''" @click="setType(2)">我要退货
				<image v-if="selectType==2" src="../../static/img/gou@2x.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="li" @click='fks'>
				{{yuan}}
				<view class="rig">
					<image src="../../static/img/3/3-99.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="li">
				请选择退款金额
				<view class="rig">
					<!-- <image src="../../static/img/3/3-99.png" mode="widthFix"></image> -->
					<input type="text" v-model='price' />
				</view>
			</view>
			<view class="li" v-if="returnType == 2">
				请选择退货数量
				<view class="rig">
					<!-- <image src="../../static/img/3/3-99.png" mode="widthFix"></image> -->
					<input type="text" v-model='numbers' />
				</view>
			</view>
			<view class="textare">
				<textarea v-model="con"  :maxlength="max" placeholder="请输入退货问题描述" />
				<view class="number">
					{{con.length}}/{{max}}
				</view>
			</view>
			
			<!-- <view class="textare">
				<view class="h3">
					上传图片（最多6张）
				</view>
				<view class="imgbox">
					<view class="boxs">
					</view>
					
					<view class="add" @click="add">
						<image src="../../static/img/3/3-80.png" ></image>
					</view>
				</view>
			</view> -->
		<!-- 	<view class="ges">
				<text>联系人</text>
				<input type="text" value="" />
			</view>
			<view class="ges">
				<text>联系电话</text>
				<input type="text">
			</view> -->
		</view>
		<view class="out" @click="jamp">
			提交
		</view>
		<view class="txtbox">
			<view class="title">
				温馨提示：
			</view>
			<view class="p">
				• 商品寄回地址将在审核通过后以短信形式告知，或在申请记录中查询。<br>
				• 提交服务单后，售后专员可能与您电话沟通，请保持手机畅通。<br>
				• 退货处理成功后退款金额将原路返回到您的支持账户中
			</view>
		</view>
		<view class="meng" v-if="meng">
			<view class="tan">
				<view class="h4">
					退货原因
					<view class="close" @click="close">
						<image src="../../static/img/3/3-1.png" mode="widthFix"></image>
					</view>
				</view>
				<scroll-view scroll-y="true" class="li-box">
					<view v-for="l in liso" :key="l.id" class="lis" :class="{'active':ce==l.reason}" @click="check(l.reason)">
						{{l.reason}}
						<image src="../../static/img/3/3-43.png" mode="widthFix"></image>
					</view>
				</scroll-view>
				<view class="over" @click="moe">完成</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				lo:0,
				ce:1,
				meng:false,
				con:'',
				max:500,
				qq:'',
				liso:[],
				yuan:'请选择退货原因',
				data:[],
				money:0,
				num:0,
				returnType:0,
				showType:false,
				selectType:0,
				price:'',
				numbers:'',
				cSaleReturnNo:""
			}
		},
		onLoad(options) {
			this.cSaleReturnNo = options.cSaleReturnNo
			var that = this;
			that.ids = options.id
			that.num = options.num
			that.money = options.money
			that.$Request.post(
			that.$api.httpApi.user.closeoder+'&token='+that.$SysCache.get('token'),
			{type:"orderrefund"}
			).then(res=>{
				if(res.code == 200){
					that.liso=res.data;
				}
			});
			
			that.$Request.post(
			that.$api.httpApi.user.oderPay+'&token='+that.$SysCache.get('token'),
			{cOrderNo:options.cOrderNo}
			).then(res=>{
				console.log(res.data)
				if(res.code == 200){
					that.data=res.data;
					that.lo= res.data.oOrderDetails[0].id;
					
					that.$Request.post(
					that.$api.httpApi.order.getReturnDetail+'&token='+that.$SysCache.get('token'),
					{iDetailId:res.data.oOrderDetails[0].id}
					).then(resd=>{
						if(resd.code == 200){
							console.log(resd.data)
							
							if(resd.data.cNextStatus=="DELIVERGOODS"){
								that.num = 0
							}else{
								that.num = resd.data.iQuantity
							}
							that.money = resd.data.fCanReturnMoney
							
							
							
							
						}
					});
					
					
					
					
				}
			});
		},
		computed:{
			returnText(){
				if(this.returnType == 0){
					return "请选择售后类型"
				}else if(this.returnType == 1){
					return "我要退款"
				}else if(this.returnType == 2){
					return "我要退货"
				}
			}
		},
		methods:{
			changeType(){
				this.showType = !this.showType
			},
			setType(val){
				this.selectType = val
				this.returnType = val
			},
			che(id,money,num,status){
				this.lo=id
				this.money=money
				if(status == "DELIVERGOODS"){
					this.num = 0
				}else{
					this.num = num
				}
				
			},
			jamp(){
				var that = this;
				let quantity = null
				let money = null
				if(this.returnType == 2){
					if(this.num == 0){
						uni.showToast({
							title:"未发货商品不能退货"
						});
					}else{
						if(this.numbers<=this.num){
							quantity = this.numbers
						}else{
							uni.showToast({
								title:"退款数量不能大于总数量"
							});
							return false
						}
					}
					
				}
				if(this.price<=this.money){
					money = this.price
				}else{
					uni.showToast({
						title:"退款金额不能大于总金额"
					});
					return false
				}
				that.$Request.post(
				that.$api.httpApi.order.update+'&token='+that.$SysCache.get('token'),
				{
				iDetailId:that.lo,
				reason:that.yuan,
				quantity:quantity,
				money:money,
				description:that.con,
				cSaleReturnNo:that.cSaleReturnNo
				}
				).then(res=>{
					if(res.code == 200){
						uni.navigateTo({
							url:'/pages/user/odershover'
						})
					}
				});
				
			},
			fks(){
				this.meng=true
			},
			moe(){
				this.yuan=this.ce;
				this.meng=false
			},
			add(){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
				        // uni.uploadFile({
				        //     url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
				        //     filePath: tempFilePaths[0],
				        //     name: 'file',
				        //     formData: {
				        //         'user': 'test'
				        //     },
				        //     success: (uploadFileRes) => {
				        //         console.log(uploadFileRes.data);
				        //     }
				        // });
				    }
				});
			},
			close(){
				this.meng=false
			},
			check(id){
				this.ce=id;
			}
		},
		onNavigationBarButtonTap(){
				   uni.navigateTo({
				       // url: '/pages/user/vipjs'
				   })
		}

	}
</script>

<style scoped lang="less">
	.numb {
		width: 90rpx;
		text-align: right;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		display: inline-block;
		vertical-align: middle;
	}
	
	.numb view {
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin-top: 12rpx;
	}
	
	.txtbox{
		padding-left: 25rpx;
		padding-right: 25rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-top: 70rpx;
	}
	.txtbox .title{
		font-size:29rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#333;
	}
	.txtbox .p{
		line-height:55rpx;
	}
	.ges{
		height:70rpx;
		background:rgba(255,255,255,1);
		font-size:25rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(51,51,51,1);
		padding-left: 30rpx;
		padding-right: 30rpx;
		line-height: 70rpx;
		margin-bottom: 10rpx;
	}
	.ges input{
		display: inline-block;
		vertical-align: middle;
		width: 60%;
		font-size:25rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(51,51,51,1);
	}
	.ges text{
		display: inline-block;
		width: 157rpx;
	}
	.imgbox{
		margin-top: 26rpx;
	}
	.imgbox .boxs{
		display: inline-block;
	}
	.imgbox image{
		display: inline-block;
		width:161rpx;
		height:114rpx;
		border:1px solid rgba(234, 234, 234, 1);
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.imgbox .add{
		display: inline-block;
		width:145rpx;
		height:145rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	.imgbox .add image{
		margin: 0;
		width: 145rpx;
		height: 145rpx;
	}
	.textare .h3{
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(102,102,102,1);
	}
	.number{
		text-align: right;
		margin-top: 10rpx;
		font-size:20rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(183,183,183,1);
	}
	.textare{
		margin-top: 10rpx;
		background: #fff;
		padding: 28rpx;
		margin-bottom: 10rpx;
	}
		.textare textarea{
			display: block;
			width: 100%;
			height: 170rpx;
			font-size:23rpx;
			font-family:Microsoft YaHei;
			font-weight:400;
			color:rgba(183,183,183,1);
		}
	.over{
		width:613rpx;
		height:65rpx;
		background:rgba(240,64,111,1);
		border-radius:33rpx;
		font-size:26rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:65rpx;
		text-align: center;
		margin: auto;
		margin-top: 32rpx;
	}
	.li-box {
		height: calc(100% - 99rpx - 170rpx);
		overflow: auto;
	}

	.li-box .lis {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999;
		width: 90%;
		margin: auto;
		height: 65rpx;
		line-height: 65rpx;
	}

	.li-box .lis image {
		width: 26rpx;
		float: right;
		margin-top: 20rpx;
		display: none;
	}
	
	.li-box .active {
		color: #666;
	}

	.li-box .active image {
		display: block;
	}

	.meng {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.59);
	}

	.out {
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		width: 680rpx;
		height: 65rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 33rpx;
		margin: auto;
		text-align: center;
		line-height: 65rpx;
		margin-top: 80rpx;
	}

	.meng .tan {
		background: #fff;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 720rpx;
		width: 100%;
	}

	.meng .tan .h4 {
		height: 99rpx;
		border-bottom: 1px solid #d6d6d6;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 99rpx;
		text-align: center;
		position: relative;
	}

	.meng .tan .h4 .close {
		position: absolute;
		width: 99rpx;
		height: 99rpx;
		right: 0;
		top: 0;
		text-align: center;
		line-height: 99rpx;
	}

	.meng .tan .h4 .close image {
		display: inline-block;
		width: 20rpx;
		margin: auto;
	}

	.list .li {
		margin-bottom: 1px;
		background: #fff;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 35rpx;
		padding-top: 35rpx;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		&.typeRow{
			display: flex;
			justify-content: space-around;
			.option_type{
				width:185upx;
				height:42upx;
				background:rgba(233,233,233,0);
				border:1px solid #999;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size:15upx;
				font-family:Microsoft YaHei;
				font-weight:400;
				color:#999;
				&.active{
					border:1px solid rgba(239,64,111,1);
					color:rgba(239,64,111,1);
					position: relative;
					image{
						width: 21upx;
						height: 21upx;
						position: absolute;
						bottom: 0;
						right: 0;
					}
				}
				
			}
		}
	}

	.list .li .rig {
		display: inline-block;
		float: right;
		input{
			display: inline-block;
			width: auto;
			vertical-align: middle;
			margin-left: 19rpx;
			text-align: right;
		}
	}

	.list .li .rig image {
		display: inline-block;
		width: 16rpx;
		vertical-align: middle;
		margin-left: 19rpx;
	}

	.list .li .rig text {
		display: inline-block;
		vertical-align: middle;
	}
.list .inli{
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}
.list .inli input{
	font-size:26rpx;
	font-family:Microsoft YaHei;
	font-weight:400;
	color:rgba(183,183,183,1);
	height: 50rpx;
}
	uni-page-body {
		height: 100%;
	}

	.mons {
		min-height: 100%;
		background: #EEEEEE;
		position: relative;
	}

	.top {
		background: url(../../static/img/3/3-35.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 65rpx;
		padding-bottom: 65rpx;
	}

	.head {
		width: 124rpx;
		height: 124rpx;
		display: block;
		background: rgba(255, 255, 255, 0.53);
		border: 1px solid rgba(255, 255, 255, 0.53);
		border-radius: 50%;
		margin: auto;
	}

	.head image {
		display: block;
		width: 102rpx;
		height: 102rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 50%;
		margin: auto;
		margin-top: 10rpx;
	}

	.name {
		text-align: center;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin-top: 17rpx;
	}
	.con .text {
		display: inline-block;
		vertical-align: middle;
		width: 400rpx;
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 30rpx;
		margin-left: 20rpx;
	}
	
	.con .text .bu {
		display: block;
		width: 162rpx;
		height: 31rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 5rpx;
		font-size: 18rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 30rpx;
		text-align: center;
		margin-top: 15rpx;
	}
	
	.con .img {
		display: inline-block;
		vertical-align: middle;
		width: 130rpx;
		height: 130rpx;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		border-radius: 5rpx;
		text-align: center;
		line-height: 130rpx;
	}
	
	.con .img image {
		display: inline-block;
		width: 70%;
		margin: auto;
		vertical-align: middle;
	}
	.con .ops {
		width: 26rpx;
		float: right;
		/* display: none; */
		margin-top: 52rpx;
	}
</style>
